<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <title>pluginForm</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">
            <legend>
                <strong><label th:text="${action}"></label> plugin,
                    <label th:text="'route: ' + ${plugin.route.id}" th:if="${plugin.route}"></label>
                    <label th:text="'service: ' + ${plugin.service.id}" th:if="${plugin.service}"></label>
                </strong>
            </legend>

            <form action="/kong/plugins/save" method="post" class="form-horizontal">
                <input type="hidden" th:value="${plugin.id}" id="plugin_id" name="id"/>
                <input type="hidden" th:value="${plugin.name}" id="plugin_db_name"/>
                <input type="hidden" th:value="${plugin.service.id}" id="service_id" name="service.id"  th:if="${plugin.service}"/>
                <input type="hidden" th:value="${plugin.route.id}" id="route_id" name="route.id" th:if="${plugin.route}"/>
                <input type="hidden" th:value="${plugin.consumer.id}" id="consumer_id" th:if="${plugin.consumer}"/>
                <div class="form-group">
                    <label for="plugin_name" class="col-sm-2 control-label">name:</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="plugin_name" name="name">
                            <option>selected</option>
                            <option>request-size-limiting</option>
                            <option>response-ratelimiting</option>
                            <option>response-transformer</option>
                            <option>request-transformer</option>
                            <option>request-terminatio</option>
                            <option>correlation-id</option>
                            <option>ip-restriction</option>
                            <option>bot-detection</option>
                            <option>rate-limiting</option>
                            <option>aws-lambda</option>
                            <option>basic-auth</option>
                            <option>ldap-auth</option>
                            <option>hmac-auth</option>
                            <option>key-auth</option>
                            <option>http-log</option>
                            <option>runscope</option>
                            <option>file-log</option>
                            <option>udp-log</option>
                            <option>datadog</option>
                            <option>tcp-log</option>
                            <option>syslog</option>
                            <option>loggly</option>
                            <option>oauth2</option>
                            <option>statsd</option>
                            <option>cors</option>
                            <option>acl</option>
                            <option>jwt</option>
                        </select>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-acl">
                    <label class="col-sm-2 control-label">consumer group whitelist:</label>
                    <div class="col-xs-3 acl_whitelist">
                    </div>
                    <div class="col-xs-1"><a class="btn btn-info add_acl_whitelist" href="javascript:void(0)">add whitelist</a></div>
                </div>
                <div class="form-group plugin-option plugin-acl">
                    <label class="col-sm-2 control-label">consumer group blacklist:</label>
                    <div class="col-xs-3 acl_blacklist">
                    </div>
                    <div class="col-xs-1"><a class="btn btn-info add_acl_blacklist" href="javascript:void(0)">add blacklist</a></div>
                </div>

                <div class="form-group plugin-option">
                    <label for="plugin_consumer" class="col-sm-2 control-label">consumer:</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="plugin_consumer" name="consumer.id">
                            <option value="" >all</option>
                            <option th:each="consumer : ${consumers}" th:value="${consumer.id}" th:text="${consumer.username}" ></option>
                        </select>
                    </div>
                </div>

                <div class="form-group plugin-option plugin-jwt">
                    <label for="plugin_config_claims_to_verify" class="col-sm-2 control-label">config.claims_to_verify:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_claims_to_verify" name="config.claims_to_verify" th:value="${plugin.config.claims_to_verify}"/>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-statsd">
                    <label for="plugin_config_host" class="col-sm-2 control-label">config.host:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_host" name="config.host" th:value="${plugin.config.host}"/>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-statsd">
                    <label for="plugin_config_port" class="col-sm-2 control-label">config.port:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_port" name="config.port" th:value="${plugin.config.port}"/>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-rate-limiting">
                    <label for="plugin_config_second" class="col-sm-2 control-label">config.second:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_second" name="config.second" th:value="${plugin.config.second}"/>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-rate-limiting">
                    <label for="plugin_config_hour" class="col-sm-2 control-label">config.hour:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_hour" name="config.hour" th:value="${plugin.config.hour}"/>
                    </div>
                </div>
                <div class="form-group plugin-option plugin-file-log">
                    <label for="plugin_config_path" class="col-sm-2 control-label">config.path:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="plugin_config_path" name="config.path" th:value="${plugin.config.path}"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input class="btn btn-primary" type="submit" value="submit"/>&nbsp;&nbsp;
                        <input class="btn " type="button" value="go back" onclick="history.back()"/>
                    </div>
                </div>
            </form>
            <div th:text="${pluginConfig}"></div>
        </div>
    <script type="application/javascript">
        function select_option_changed(pluginName){
            if(null == pluginName){
                pluginName = $('#plugin_db_name').val();
            }
            $('.plugin-option').hide();
            if('jwt' === pluginName){
                var claims_to_verify = $('#plugin_config_claims_to_verify').val();
                $('#plugin_config_claims_to_verify').val(claims_to_verify.substring(1, claims_to_verify.length-1));
            }
            $('.plugin-'+pluginName).show();
        }
        $(function(){
            select_option_changed(null);
            var plugin_name = $('#plugin_db_name').val();
            $('#plugin_name option').each(function(){
                if($(this).val() == plugin_name){
                    $(this).attr('selected', 'selected');
                }
            });
            var plugin_consumer_id = $('#consumer_id').val();
            $('#plugin_consumer option').each(function(){
                if($(this).val() == plugin_consumer_id){
                    $(this).attr('selected', 'selected');
                }
            });

            function showServiceName(){

                $('input[type=text]').each(function(){
                    var text = $(this).val();
                    if(text.startsWith("[") && text.endsWith(']')){
                        $(this).val(text.substring(1,text.length-1));
                    }
                })
            }
            $('#plugin_name').change(function(){
                var pluginName = $(this).val();
                select_option_changed(pluginName)
            });


            $(".add_acl_blacklist").click(function () {
                var child_length = $('.acl_blacklist').children().length;
                var child = '<input class="form-control" id="plugin_acl_blacklist'
                    + child_length
                    + '" name="config.blacklist['
                    + child_length + ']"/>';
                $('.acl_blacklist').append(child)
            });

            $(".add_acl_whitelist").click(function () {
                var child_length = $('.acl_whitelist').children().length;
                var child = '<input class="form-control" id="plugin_acl_whitelist'
                    + child_length
                    + '" name="config.whitelist['
                    + child_length + ']"/>';
                $('.acl_whitelist').append(child)
            });

        })
    </script>
    </body>
</html>